<template>
        <van-tabbar v-model="active" route fixed>
            <van-tabbar-item icon="wap-home" to="/" replace>{{$t('tabBar.index')}}</van-tabbar-item>
            <van-tabbar-item to="/message" replace>
                <span>{{$t('tabBar.message')}}</span>
                <template #icon>
                    <van-icon name="chat" :badge="getInfo()" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="bag" to="/orders" replace>{{$t('tabBar.order')}}</van-tabbar-item>
            <van-tabbar-item icon="setting" to="/profile" replace>{{$t('tabBar.profile')}}</van-tabbar-item>
        </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem, Icon } from 'vant';
import 'vant/lib/tabbar/style/less';
import 'vant/lib/tabbar-item/style/less';

export default {
    props: {
        dot: {
            type: Number,
            default: 0
        }
    },
    components: {
        [Icon.name]: Icon,
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem
    },
    data () {
        return {
            active: 0
        };
    },
    computed: {
        getInfo () {
            return function () {
                if (this.dot) {
                    return this.dot;
                }
            };
        }
    }
};
</script>
